<template>
    <div class="auth-box">
        <el-tree
            ref="treeRef"
            node-key="id"
            :data="treeData"
            :check-strictly="false"
            show-checkbox
            :props="defaultProps"
            :default-expand-all="true"
            :default-checked-keys="checkedNodes"
        ></el-tree>
        <el-button type="primary" @click="handleUpdateAuth">修改</el-button>
    </div>
</template>
<script setup lang="ts">
import { IAuth } from '@/api/auth/types';
import { getAuthList } from '@/api/auth/index';
defineOptions({
    name: 'Auth',
});
const route = useRoute();
const checkedNodes = ref<number[]>([]);
const defaultProps = {
    label: 'name',
};
const treeRef = ref<any>(null);
const treeData = ref<IAuth[]>([]);
const listData = () => {
    getAuthList().then((res) => {
        treeData.value = res.data;
    });
};
const handleUpdateAuth = () => {
    const selectedTreeNode = treeRef.value.getCheckedNodes();
    const selectedTreeNodeKeys = treeRef.value.getCheckedKeys();
    console.log('🚀 ~ handleUpdateAuth ~ selectedTreeNode:', selectedTreeNode);
    console.log(
        '🚀 ~ handleUpdateAuth ~ selectedTreeNodeKeys:',
        selectedTreeNodeKeys,
    );
};
const init = () => {
    const { query } = route;
    if (query.auth) {
        checkedNodes.value = query.auth;
    }
    listData();
};
init();
</script>
<style scoped lang="less">
.auth-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: start;
}
</style>
